<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :close-on-click-modal="false"
      v-model="show"
      width="800px"
      append-to-body
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <el-col
            :span="24"
            v-if="
              (modelType === 'srcs' || modelType === 'sccs') &&
              formData.parentNode
            "
          >
            <el-form-item label="所属参数">
              <el-input v-model="formData.parentNode" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              :label="formData.isAttr ? '属性名' : '参数名'"
              prop="nodeName"
            >
              <el-input
                v-model="formData.nodeName"
                placeholder="请输入参数名"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="formData.isAttr ? '属性描述' : '参数描述'"
              prop="nodeLabel"
            >
              <el-input
                v-model="formData.nodeLabel"
                placeholder="请输入参数描述"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              :label="formData.isAttr ? '属性类型' : '参数类型'"
              prop="nodeType"
            >
              <dict-selector
                v-model="formData.nodeType"
                :dictData="nodeTypeList"
                placeholder="请选择参数类型"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              v-if="
                formData.nodeType === 'array' &&
                (modelType === 'srcs' || modelType === 'sccs')
               && false"
              label="元素类型"
              prop="elementType"
            >
              <dict-selector
                v-model="formData.elementType"
                :dictData="elementTypeList"
                placeholder="请选择元素类型"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="24"
            v-if="modelType === 'qqtIn' || modelType === 'srcs'"
          >
            <el-form-item
              v-if="
                formData.nodeType === 'string' ||
                formData.elementType === 'string'
              "
              label="校验规则"
              prop="nodeCheckRegex"
            >
              <el-input
                v-model="formData.nodeCheckRegex"
                placeholder="请输入接口名称"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否必须" prop="nodeNeededable">
              <el-switch
                v-model="formData.nodeNeededable"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            v-if="modelType === 'qqtIn' || modelType === 'srcs'"
          >
            <el-form-item label="是否必填" prop="nodeValueable">
              <el-switch
                v-model="formData.nodeValueable"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <dialog-footer slot="footer" @ok="onOk" @cancel="onCancel" />
    </el-dialog>
  </div>
</template>

<script>
/**
 * modelType:
 * qqtIn = 请求头参数
 * qqtOut = 响应头参数
 * srcs = 输入参数
 * sccs = 输出参数
 */
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    modelType: {
      type: String,
      default: "",
    },
    nodeTypeList: {
      type: Array,
      default: () => [],
    },
    rules: {
      type: Object,
      default: () => {},
    },
    initData: {
      type: Object,
      default: () => {},
    },
  },
  created() {
    this.getDicts("element_type").then((response) => {
      this.elementTypeList = response.data;
    });
  },
  data() {
    return {
      formData: {},
      elementTypeList: [],
    };
  },
  watch: {
    initData(val) {
      this.formData = JSON.parse(JSON.stringify(val));
    },
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    onOk() {
      this.$refs["formRef"].validate((v) => {
        if (v) {
          this.$emit("onOk", this.formData);
        }
      });
    },
    onCancel() {
      this.$emit("update:visible", false);
      this.$emit("onCancel");
    },
    onReset() {
      this.resetForm("formRef");
    },
  },
};
</script>
